<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>14_案例练习-购物车加加减减</title>
    </head>
    <body>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>
        <button class="sub">-</button>
        <span>1</span>
        <button class="plus">+</button><br>


        <script>
            var plus_list = document.querySelectorAll('.plus');

            for(var i = 0; i < plus_list.length; i++){
                plus_list[i].onclick = function(){
                    this.previousElementSibling.innerHTML++;
                }
            }


            var sub_list = document.querySelectorAll('.sub');

            sub_list.forEach(function(item){
                item.onclick = function(){
                    var n = this.nextElementSibling.innerHTML;
                    if(n > 1){
                        n--;
                    }
                    this.nextElementSibling.innerHTML = n;

                }
            })
        </script>
       
    </body>
</html>